<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改考勤规则')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<style>
    .form-group {
        margin-bottom: 35px;
    }


</style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-rule-edit" th:object="${clockRule}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">    
                <div class="col-sm-8">
                    <input name="suitYear" th:field="*{suitYear}" class="form-control" type="hidden">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">工作日：</label>
                <div class="col-sm-9">
                    <label class="col-sm-1 control-label" style="margin-left: -35px;">星期一：</label>
                    <div class="col-sm-1" style="margin-left: -30px; margin-top: -1px; margin-right: -50px;">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="monday" th:checked="${clockRule.monday == '0' ? true : false}">
                            <span></span>
                        </label>
                    </div>
                    <label class="col-sm-1 control-label">星期二：</label>
                    <div class="col-sm-1" style="margin-left: -30px; margin-top: -1px; margin-right: -50px;">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="tuesday" th:checked="${clockRule.tuesday == '0' ? true : false}">
                            <span></span>
                        </label>
                    </div>
                    <label class="col-sm-1 control-label">星期三：</label>
                    <div class="col-sm-1" style="margin-left: -30px; margin-top: -1px; margin-right: -50px;">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="wednesday" th:checked="${clockRule.wednesday == '0' ? true : false}">
                            <span></span>
                        </label>
                    </div>
                    <label class="col-sm-1 control-label">星期四：</label>
                    <div class="col-sm-1" style="margin-left: -30px; margin-top: -1px; margin-right: -50px;">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="thursday" th:checked="${clockRule.thursday == '0' ? true : false}">
                            <span></span>
                        </label>
                    </div>
                    <label class="col-sm-1 control-label">星期五：</label>
                    <div class="col-sm-1" style="margin-left: -30px; margin-top: -1px; margin-right: -50px;">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="friday" th:checked="${clockRule.friday == '0' ? true : false}">
                            <span></span>
                        </label>
                    </div>
                    <label class="col-sm-1 control-label">星期六：</label>
                    <div class="col-sm-1" style="margin-left: -30px; margin-top: -1px; margin-right: -50px;">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="saturday" th:checked="${clockRule.saturday == '0' ? true : false}">
                            <span></span>
                        </label>
                    </div>
                    <label class="col-sm-1 control-label">星期天：</label>
                    <div class="col-sm-1" style="margin-left: -30px; margin-top: -1px; margin-right: -50px;">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="sunday" th:checked="${clockRule.sunday == '0' ? true : false}">
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">上班开始时间：</label>
                <div class="col-sm-2">
                    <div class="input-group date">
                        <input id="startTime" th:value="${clockRule.startTime}" name="startTime" class="form-control" placeholder="HH:mm:ss">
                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">上班迟到时间：</label>
                <div class="col-sm-2">
                    <div class="input-group date">
                        <input id="lateTime" th:value="${clockRule.lateTime}" name="lateTime" class="form-control" placeholder="HH:mm:ss">
                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">旷工时间：</label>
                <div class="col-sm-2">
                    <div class="input-group date">
                        <input id="absenceTime" th:value="${clockRule.absenceTime}" name="absenceTime" class="form-control" placeholder="HH:mm:ss">
                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">下班时间：</label>
                <div class="col-sm-2">
                    <div class="input-group date">
                        <input id="endTime" th:value="${clockRule.endTime}" name="endTime" class="form-control" placeholder="HH:mm:ss">
                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">早退时间：</label>
                <div class="col-sm-2">
                    <div class="input-group date">
                        <input id="earlyLeaveTime" th:value="${clockRule.earlyLeaveTime}" name="earlyLeaveTime" class="form-control" placeholder="HH:mm:ss">
                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                    </div>
                </div>
            </div>

            <div class="panel panel-default" style="margin-left:321px; width:800px; border: none">
                <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                    <!--假日开始-->
                    <div class="form-group" style="margin-top: 30px;margin-left: -160px;">
                        <label class="col-sm-3 control-label">元旦假期：</label>
                        <div class="col-sm-8">
                            <input name="newYearHolidays" type="text" class="form-control" th:field="*{newYearHolidays}" id="newYearHolidays" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;margin-left: -160px;">
                        <label class="col-sm-3 control-label">春节假期：</label>
                        <div class="col-sm-8">
                            <input name="springFestivalHolidays" th:field="*{springFestivalHolidays}" type="text" class="form-control" id="springFestivalHolidays" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;margin-left: -160px;">
                        <label class="col-sm-3 control-label">清明假期：</label>
                        <div class="col-sm-8">
                            <input name="qingmingHolidays" th:field="*{qingmingHolidays}" type="text" class="form-control" id="qingmingHolidays" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;margin-left: -160px;">
                        <label class="col-sm-3 control-label">五一假期：</label>
                        <div class="col-sm-8">
                            <input name="fiveOneHolidays" th:field="*{fiveOneHolidays}" type="text" class="form-control" id="fiveOneHolidays" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;margin-left: -160px;">
                        <label class="col-sm-3 control-label">端午假期：</label>
                        <div class="col-sm-8">
                            <input name="duanWuHolidays" th:field="*{duanWuHolidays}" type="text" class="form-control" id="duanWuHolidays" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;margin-left: -160px;">
                        <label class="col-sm-3 control-label">中秋假期：</label>
                        <div class="col-sm-8">
                            <input name="zhongQiuHolidays" th:field="*{zhongQiuHolidays}" type="text" class="form-control" id="zhongQiuHolidays" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;margin-left: -160px;">
                        <label class="col-sm-3 control-label">国庆假期：</label>
                        <div class="col-sm-8">
                            <input name="guoQinHolidays" th:field="*{guoQinHolidays}" type="text" class="form-control" id="guoQinHolidays" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;margin-left: -160px;">
                        <label class="col-sm-3 control-label">其他假期：</label>
                        <div class="col-sm-8">
                            <input name="otherHolidays" th:field="*{otherHolidays}" type="text" class="form-control" id="otherHolidays" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>
                    <!--假日结束-->
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-8">
                    <input name="tenantId" th:field="*{tenantId}" class="form-control" type="hidden">
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button"style="margin-right: 3px;" class="btn btn-sm btn-primary"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" aria-expanded="false" style="color:white">假期安排</a></button>
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/rule";

        function submitHandler() {
            if ($.validate.form()) {
                var data = $("#form-rule-edit").serializeArray();
                var monday = $("input[id='monday']").is(':checked') == true ? 0 : 1;
                var tuesday = $("input[id='tuesday']").is(':checked') == true ? 0 : 1;
                var wednesday = $("input[id='wednesday']").is(':checked') == true ? 0 : 1;
                var thursday = $("input[id='thursday']").is(':checked') == true ? 0 : 1;
                var friday = $("input[id='friday']").is(':checked') == true ? 0 : 1;
                var saturday = $("input[id='saturday']").is(':checked') == true ? 0 : 1;
                var sunday = $("input[id='sunday']").is(':checked') == true ? 0 : 1;
                data.push({"name": "monday", "value": monday});
                data.push({"name": "tuesday", "value": tuesday});
                data.push({"name": "wednesday", "value": wednesday});
                data.push({"name": "thursday", "value": thursday});
                data.push({"name": "friday", "value": friday});
                data.push({"name": "saturday", "value": saturday});
                data.push({"name": "sunday", "value": sunday});
                $.operate.mySaveTab(prefix + "/edit", data);
            }
        }



        $("#form-rule-edit").validate({
            focusCleanup: true
        });

        $(function(){
            layui.use('laydate', function() {
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#newYearHolidays',
                    range: true
                });
                laydate.render({
                    elem: '#springFestivalHolidays',
                    range: true
                });
                laydate.render({
                    elem: '#qingmingHolidays',
                    range: true
                });
                laydate.render({
                    elem: '#fiveOneHolidays',
                    range: true
                });
                laydate.render({
                    elem: '#duanWuHolidays',
                    range: true
                });
                laydate.render({
                    elem: '#zhongQiuHolidays',
                    range: true
                });
                laydate.render({
                    elem: '#guoQinHolidays',
                    range: true
                });
                laydate.render({
                    elem: '#otherHolidays',
                    range: true
                });
                laydate.render({
                    elem: '#startTime',
                    type: 'time'
                });

                laydate.render({
                    elem: '#lateTime',
                    type: 'time'
                });
                laydate.render({
                    elem: '#absenceTime',
                    type: 'time'
                });

                laydate.render({
                    elem: '#endTime',
                    type: 'time'
                });

                laydate.render({
                    elem: '#earlyLeaveTime',
                    type: 'time'
                });
            })
        });
    </script>
</body>
</html>